<template>
  <div class="sampleComparison tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:110px">
        <el-date-picker v-model="dateRange" type="month" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM"></el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
      </div>&emsp;&emsp;
      <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap scrollSpecial">
      <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">当前断面</el-radio-button>
              <el-radio-button label="2">所有断面</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div class="tablebox">
            <div class="table-head">
              <table>
                <tr>
                  <th width="13%">监测项目</th>
                  <th width="10%">单位</th>
                  <th width="17%">仪器测试值</th>
                  <th width="17%">人工测试值</th>
                  <th width="16%">误差</th>
                  <th width="17%">技术要求</th>
                  <th width="16%">是否合格</th>
                </tr>
              </table>
            </div>
            <el-scrollbar style="height:calc(100% - 32px)">
              <ul class="table-body clearfix">
                <li v-for="(item,index) in tableData">
                  <div class="toggle-row" :class="{active:item.toggle}">
                    <i class="toggle-icon" @click="toggleTable(item)" :class="{active:item.toggle}"></i>
                    <span>采样时间：{{ item.time }}</span>
                  </div>
                  <el-collapse-transition>
                    <div v-if="item.toggle">
                      <table>
                        <tr v-for="(n,m) in item.list">
                          <td width="13%">{{ n.indexName }}</td>
                          <td width="10%">{{ n.indexUnit }}</td>
                          <td width="17%">{{ n.automaticValue }}</td>
                          <td width="17%">{{ n.artificialValue }}</td>
                          <td width="16%">{{ n.error }}</td>
                          <td width="17%">{{ n.technicalCequirement }}</td>
                          <td width="16%">
                            <b v-if="parseInt(n.qualified) === 1">合格</b>
                            <b v-if="parseInt(n.qualified) === 0" style="color: red">不合格</b>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </el-collapse-transition>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
        <div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <div class="tablebox" style="">
            <el-table
              :yfdata="tableData2"
              border
              style="width: 100%">
              <el-table-column
                prop="area"
                fixed
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                label="流域">
              </el-table-column>
              <el-table-column
                prop="nameSection"
                fixed
                label="断面名称">
              </el-table-column>
              <el-table-column
                prop="samplingTime"
                fixed
                label="采样时间">
              </el-table-column>
              <el-table-column
                v-for="(item,index) in tableHead"
                :key="index"
                :prop="item.prop"
                :label="item.label">
                <template slot-scope="scope">
                  <b v-if="parseInt(scope.row[item.prop]) === 1">合格</b>
                  <b v-if="parseInt(scope.row[item.prop]) === 0" style="color: red">不合格</b>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sampleComparison",
  data() {
    return {
      dateRange: '',
      value: ["w01001", "w21023", "w01009", "w01014", "w01003"],
      optionData: [
        {
          value: "w01001",
          label: "pH"
        },
        {
          value: "w21023",
          label: "水温"
        },
        {
          value: "w01009",
          label: "溶解氧"
        },
        {
          value: "w01014",
          label: "电导率"
        },
        {
          value: "w01003",
          label: "浊度"
        }
      ],
      currentPage: 1,
      pageSize: 1,
      pageList: [5, 10, 15],
      total: 1,
      tableData: [],
      tableData2: [
        {
          area: "河南省",
          basin: "淮河流域白露河",
          nameSection: "淮滨北庙",
          samplingTime: "2019-01-25 12",
          waterTem: "1",
          ph: "1",
          dissolvedOxygen: "0",
          conductivity: "1",
          turbidity: "0",
          permanganate: "1"
        }
      ],
      tableHead: [
        {
          label: "水温",
          prop: "waterTem"
        },
        {
          label: "pH",
          prop: "ph"
        },
        {
          label: "溶解氧",
          prop: "dissolvedOxygen"
        },
        {
          label: "电导率",
          prop: "conductivity"
        },
        {
          label: "浊度",
          prop: "turbidity"
        },
        {
          label: "高锰酸盐",
          prop: "permanganate"
        }
      ],
      stateRadio: "1"
    };
  },
  computed: {
    totalPageNumber() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.total / this.pageSize);
      return number;
    },
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  methods: {
    toggleTable(item) {
      if (item.toggle) {
        item.toggle = false;
      } else {
        item.toggle = true;
      }
    },
    toggleTab(val) {
      // console.log(val);
    },
    search(){
      this.getTableData()
    },
    getTableData(){
      this.$http.get("/Quality/testData/realWaterSampleComparisonData", {
          params: {
            startTime: this.dateRange,
            endTime: this.dateRange,
            indexCodes: this.value.join(","),
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
            // pageNumber: this.currentPage,
            // pageSize: this.pageSize
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.tableData = res.data.content.dataList;
            this.tableData.forEach((item,index) =>{
              this.$set(item,'toggle',false);
            });
          }
        });
    },
    //实际水样比对-所有断面数据请求
    getAllTableData(){
      this.$http.get("/Quality/testData/realWaterSampleComparisonData", {
        params: {
          startTime: this.dateRange,
          endTime: this.dateRange,
          indexCodes: this.value.join(","),
          stationCodes: this.stationId, //this.stationId
          ifCurrentSection: false,// true为当前断面,false为所有
          // pageNumber: this.currentPage,
          // pageSize: this.pageSize
        }
      }).then(res=>{
        if(res.data.code === 0){
          // this.tableData = res.data.content.dataList;

        }
      })
    }
  },
  mounted() {

  },
  created() {
     //初始化时间
    this.dateRange = new Date(new Date().setMonth(new Date().getMonth() - 1));
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.getTableData();
      }
    }
  }
};
</script>

<style scope lang="less">
.sampleComparison {
  .tablebox {
    height: 100%;
  }
  .table-head,
  .table-body {
    table {
      width: 100%;
      border-collapse: collapse;
      td,
      th {
        border: 1px solid #d6e3f2;
        padding: 0 3px;
        height: 30px;
        text-align: center;
      }
      th{
       font-weight: 100;
      }
    }
    .toggle-row {
      height: 30px;
      line-height: 30px;
      padding-left: 6px;
      border-left: 1px solid #d6e3f2;
      border-right: 1px solid #d6e3f2;
      border-bottom: 1px solid #d6e3f2;
      &.active {
        /*border-bottom: none;*/
      }
    }
  }
  .table-body {
    table {
      margin-top: -1px;
    }
  }
  .toggle-icon {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3px;
    width: 13px;
    height: 13px;
    background: url("../../assets/images/retract-toggle.png") no-repeat;
    cursor: pointer;
    &.active {
      background: url("../../assets/images/open-toggle.png") no-repeat;
    }
  }
}
</style>
